<template>
  <div class="chart-box" ref="chartBox"></div>
</template>

<script>
import resize from '../mixins/resize'

export default {
  title: '',
  name: "LineChartGradient",
  mixins: [resize],
  props: {
    data: {
      type: Object,
      default: () => {
      },
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
  },
  data() {
    return {
      myChart: "",
    };
  },
  watch: {
    data: {
      deep: true,
      handler: function (val) {
        this.setOptions(val)
      }
    }
  },
  computed: {
    // 随机生成id
    echartsmain() {
      return "echarts" + Math.random() * 100000;
    },
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.chart = this.$echarts.init(this.$refs.chartBox)
      this.setOptions(this.data)
    },
    setOptions({data}) {
      if (!this.chart) {
        return false
      }
      this.chart.setOption({
        color: ['#115091', '#1097fe', '#5870da', '#20c6fb', '#1CFEC3', '#FCFF00', '#00985F'],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}%",
          backgroundColor: "rgba(0,0,0,0.8)", //设置背景图片 rgba格式
          color: "white",
          borderWidth: "1", //边框宽度设置1
          borderColor: "gray", //设置边框颜色
          textStyle: {
            color: "#FFFFFF", //设置文字颜色
          }
        },
        toolbox: {
          show: false,
          feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {},
          },
        },
        calculable: true,
        series: [
          {
            name: "",
            type: "funnel",
            left: "5%",
            top: 10,
            bottom: 10,
            width: "80%",
            min: 0,
            max: 100,
            minSize: "20%", //每一块的最小宽度
            maxSize: "90%", //每一块的最大快递   一次去除掉尖角
            sort: "descending",
            gap: 2, //每一块之间的间隔
            label: {
              //设置每一块的名字是显示在图里面还是外面
              show: true,
              // position: "inside",
              textBorderColor: 'transparent',
            },
            labelLine: {
              length: 30, //设置每一块的名字前面的线的长度
              lineStyle: {
                width: 1, //设置每一块的名字前面的线的宽度
                type: "solid", //设置每一块的名字前面的线的类型
              },
            },
            itemStyle: {
              normal: {
                borderWidth: 0 //每一块边框的宽度
              }
            },
            emphasis: {
              label: {
                fontSize: 20,
              },
            },
            data: data
          }
        ]
      })
    }
  }
};
</script>

<style lang="less" scoped>
  .chart-box {
    width: 100%;
    height: 100%;
  }
</style>
